<template>
  <div class="content">
      <router-link :to="{name:'ShopList',params:{shop_type:item.name,_id:item.id}}" tag="div" class="gridList-item" v-for="(item,index) in gridList" :key="index">
        <img :src="item.icon" alt="">
        <span>{{item.name}}</span>
      </router-link>
  </div>
</template>

<script>
export default {
  name:'content_page',
  data() {
    return {
      gridList:[]
    }
  },
  mounted(){
    var url='https://www.escook.cn/categories'
        this.$axios.get(url)
        .then(res=>{
            // console.log(res.data);
            this.gridList=res.data
        })
  }
}
</script>

<style scoped>
  .content{
  display: flex;
  flex-wrap: wrap;
  }
  .gridList-item{
    width: 33.33%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #efefef;
    box-sizing: border-box;
  }
  .gridList-item img{
    width: 30px;
    height: 30px;
  }
  .gridList-item span{
    font-size: 12px;
    margin-top: 5px;
  }
</style>